import React from 'react'
import {toJS} from 'mobx';
import {inject, observer} from 'mobx-react';
import { withRouter } from 'react-router-dom';
import {TabPage, Comment, Reply} from 'weaver-mobile-page';
import {Tools,ListView,Icon,ActivityIndicator,List ,Avatar} from 'weaver-mobile';
import FileView from '../fileView';
import {GetUrlParam,openHrmCard,openAttachPage} from '../../util/Utils'
const getLabel = Tools.getLabel;

@withRouter
@inject('docStore')
@observer
export default class CommentRoute extends React.Component {
  componentDidMount() {
    const {location,docStore} = this.props;
    const {search} = location;
    let viewPraise = GetUrlParam(search,"viewPraise")
    if(viewPraise==="1"){
      docStore.typeKey = 'praise'; 
      docStore.changeTab('praise');
      docStore.getPraiseUser();
    }
    // 取消浏览器缩放支持,修复IOS下点到回复框时会出横向滚动条的问题
    let viewport = document.querySelector("meta[name=viewport]");
    viewport.setAttribute('content', "width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no");
  }
  componentWillUnmount() {
    // 增加文档页面的浏览器缩放支持
    let viewport = document.querySelector("meta[name=viewport]");
    viewport.setAttribute('content', "width=device-width,initial-scale=1,maximum-scale=2,minimum-scale=1,user-scalable=yes");
    const {docStore} = this.props;
    docStore.typeKey = 'comment'; 
  }
  //为了处理连续点击造成脏数据的问题
  doPraise = () =>{
    const {docStore} = this.props
    if(docStore.isPraised){
      docStore.isPraised = false;
      docStore.praise()
    }
  }
  clickUserItem = () =>{

  }


  render() {
    const {path, docStore} = this.props, {commentStore} = docStore;
    let {typeKey,docPraiseUsetDatasource, id, replyStore} = docStore;
    let docInfo = toJS(docStore.docInfo) || null, replyComment = toJS(docStore.replyComment);
    if (replyComment) {
      replyStore = docStore.commentReplyStoreMap[replyComment.replyId];
    }
    return (
      <div className="wm-route-layout">
        <FileView path={`${path || ''}/doc/:id/comment`}/>
        <TabPage
          tabs={[
            {title: getLabel(675, '评论 '+docInfo.replyCount), key: 'comment'},
            {title: getLabel(384393, '点赞 '+docInfo.praiseCount), key: 'praise'},
          ]}
          tabProps={{
            onTabClick:(tab, index) => {
              if(tab.key==='praise'){
                docStore.praiseUserLoading = true;
              }
              docStore.changeTab(tab.key);
              docStore.getPraiseUser();
            },
            page:typeKey,
          }}
        />
        {typeKey === 'comment' ?
          <div className="wea-docreply-list">
            <Comment store={commentStore} operateAttachList={(type, data) => {
              if (type === 'flow') {
                window.openLink(`/spa/workflow/static4mobileform/index.html#/req?requestid=${data.id}`);
              } else if (type === 'word') {
                this.props.history.push(`${path || ''}/doc/${data.id}`);
              } else {// file与pic都直接到附件查看
                openAttachPage(data.id);
                // this.props.history.push(`${path || ''}/doc/${id}/comment/iframe/${data.id}`);
              }
            }}/>
          </div>
          :
          <div className="wea-praise-user-info">
            {
              docStore.praiseUserLoading?
              <div className="praise-user-loading">
                  <ActivityIndicator />
                  <div className="parise-text-loading">{getLabel(384187,'加载中...')}</div>
              </div>
              :docStore.praiseUserInfo.length===0?
              <div className="wea-doc-error" >
                <Icon type="no-data" size="lg"/>
                <div>{getLabel(83553, '暂无数据')}</div>
              </div>
              :
              <ListView
                dataSource={docPraiseUsetDatasource}
                renderRow={(rowData, sectionID, rowID) => {
                  return (
                    <List.Item onClick={()=>this.clickUserItem()}>
                      <div key={rowData.userid} className="user-item">
                        <div className="user-avatar">
                          <Avatar userId={rowData.userid} className="user-avatar-img"/>
                          {/* <img src={rowData.headImg || "/messager/images/icon_m_wev8.jpg"} alt="" className="user-avatar-img"/> */}
                        </div>
                        
                          <div className="user-item-info-left">
                            <div className="user-item-username" style={{color:'#55B1F9'}} onClick={()=>openHrmCard(rowData.userid)}>{rowData.userName}</div>
                            <div className="user-item-sub">{rowData.subCompanyName}</div>
                          </div>
                          <div className="user-item-info-right">
                            <div className="user-item-job">{rowData.job}</div>
                            <div className="user-item-deptname">{rowData.departmentName}</div>
                          </div>
                      </div>
                    </List.Item>
                  );
                }}
                className="praise-user-info-list"
                style={docStore.typeKey === "praise" ? {display:'inline-block',height: "100%",width:"100%"}:{display:'none',height: "100%"}}
                pageSize={20}
                initialListSize={20}
                scrollRenderAheadDistance={500}
                onEndReachedThreshold={10}
              />
            }
          </div>
        }
        
        <div className="wea-doc-praise-info-footer">
          <div className="wea-doc-info-footer-reply-bg" onClick={() => docStore.showReply()}>
            <span className="wea-doc-info-footer-reply" >
              {docInfo.canReply &&[
                <Icon type="bianji" size="xs" key="icon" />,
                <span className="ml-md" key="placeholder">{getLabel(126377, '写回复')}</span>
              ]}
            </span>
          </div>
          
          <span className="wea-doc-info-footer-oper">
            {docInfo.canReply && [
             <div className="doc-detail-reply" key="reply" >
                <Icon  type="reply"  size="xs" />
                <span className="ml-sm doc-detail-replynum" key="replyNum">{docInfo.replyCount>=99?getLabel(390464, '99+'):docInfo.replyCount}</span>
              </div>,
              <div className="doc-detail-praise" key="fabulous" onClick={()=>this.doPraise()}>
                <Icon type="fabulous" className={(docInfo.isPraise ? "doc-praise" : "")}
                    size="xs" />
                <span className={"ml-sm " + (docInfo.isPraise ? "doc-praise" : "")} key="praiseNum">{docInfo.praiseCount>=99?getLabel(390464, '99+'):docInfo.praiseCount}</span>
              </div>,
            ]}
            {/* {DocConstant.isApp() && <Icon type="search" className="ml-lg" size="xs" />} */}
            <div className="doc-detail-collect" key="collection" onClick={docStore.collect}>
              <Icon type="collection" className={(docInfo.isCollute ? 'doc-collect' : "")} size="xs" />
            </div>
          </span>
          <Reply
            store={replyStore}
            wrappedComponentRef={ref => docStore.setReplyRef(ref)}
            placeholder={getLabel(18540, '回复') + (replyComment ? replyComment.creater.name : '...')}
            onSubmit={docStore.saveComment}
            leftConfig={[
              { type: 'voice' },
              { type: 'blog-biaoqing' },
              { type: 'blog-tupian' },
              { type: 'tianjia' },
            ]}
          />
        </div>
      </div>
    );
  }
}